<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html;charset=UTF-8"
         isELIgnored="false" %>
<%@ page import="com.example.bbs.model.User" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>注册页面</title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        span {
            display: inline-block;
        }

        p span:nth-of-type(1) {
            width: 80px;
            text-align: right;
        }

        p span:nth-of-type(2) {
            width: 180px;
        }

        p span:nth-of-type(3) {
            color: red;
        }

        p a {
            margin-left: 30px;
        }

        form {
            width: 400px;
            margin: 0px auto;
        }
    </style>
</head>

<body>
<div class="container">
    <form action="register.action" method="post" @submit="validate" enctype="multipart/form-data">
        <p name="fail"><span></span><span style="color: red;margin: 0px;">${fail}</span></p>
        <p><span>用户名:</span><span><input v-model="name" name="userName" @keydown="clearTips(1)"
                                         onblur="checkRepeat();"/></span><span>{{tipsName}}</span></p>
        <p><span>密码:</span><span><input v-model="pwd" name="userPassword" @keydown="clearTips(2)"
                                        type="password"/></span><span>{{tipsPwd}}</span></p>
        <p><span>确认密码:</span><span><input v-model="rePwd" name="userRePassword" @keydown="clearTips(3)"
                                          type="password"/></span><span>{{tipsRePwd}}</span></p>
        <p><span>邮箱:</span><span><input name="email" type="email"/></span><span></span></p>
        <p><span>验证码:</span><span><img style="border:1px solid black;" ref="img" @click="refreshCode"
                                       align="middle"/><input v-model="code" type="text" name="code"
                                                              @keydown="clearTips(4)" size="3"/></span><span>{{tipsCode}}</span>
        </p>
        <p><span>上传头像:</span><span><input type="file" name="icon" /></span></p>
        <p><span></span><span><input type="submit" value="注册"/><a href="login.jsp">返回登录</a></span></p>
    </form>
</div>
</body>
<script type="text/javascript">


    var vue = new Vue({
        el: ".container",
        data: {
            name: "",
            pwd: "",
            rePwd: "",
            code: "",
            tipsName: "",
            tipsPwd: "",
            tipsRePwd: "",
            tipsCode: ""
        },
        methods: {
            validate: function (e) {
                if (this.name.length == 0) {
                    this.tipsName = "请输入用户名";
                    e.preventDefault();
                    return;
                }
                if (this.pwd.length == 0) {
                    this.tipsPwd = "请输入密码";
                    e.preventDefault();
                    return;
                }
                if (this.rePwd.length == 0) {
                    this.tipsRePwd = "请输入确认密码";
                    e.preventDefault();
                    return;
                }
                if (this.code.length == 0) {
                    this.tipsCode = "请输入验证码";
                    e.preventDefault();
                    return;
                }
                if (this.rePwd != this.pwd) {
                    this.tipsRePwd = "两次密码不一致";
                    e.preventDefault();
                    return;
                }
            },
            clearTips(id) {
                if (id == 1) {
                    this.tipsName = "";
                } else if (id == 2) {
                    this.tipsPwd = "";
                } else if (id == 3) {
                    this.tipsRePwd = "";
                } else if (id == 4) {
                    this.tipsCode = "";
                }
            },
            refreshCode() {
                //  GET 请求远程图片
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/doRefreshCode.action',
                    responseType: 'blob'
                })
                    .then(function (response) {
                        // 将流转换为图片路径,设置到 img.src
                        var url = URL.createObjectURL(response.data)
                        vue.$refs.img.src = url
                    });

            }
        },
        created: function () {
            this.refreshCode();
        }

    });

    ``

    function checkRepeat() {

        var userName = document.getElementsByName("userName")[0].value;
        var ajax = new XMLHttpRequest();
        ajax.open("get", "chackRepeatName.action?userName=" + userName);
        //ajax.responseType = "json";
        ajax.onreadystatechange = function () {
            if (ajax.status = 200 && ajax.readyState == 4) {
                var json = ajax.responseText;
                var obj = eval('(' + json + ')');
                var element = document.getElementsByName("userName")[0].parentElement.nextElementSibling;
                element.innerHTML = obj.resp;
            }
        };
        ajax.send();
    }
</script>
</html>
